<template>
<h1>采购信息查询</h1>
<el-table :data="buyInfoList" stripe>
  <el-table-column prop="providerName" label="供应商名称"></el-table-column>
  <el-table-column prop="buyName" label="采购员"></el-table-column>
  <el-table-column prop="buyDate" label="采购时间"></el-table-column>
  <el-table-column label="查看详情">
    <template #default="scope">
      <el-button type="primary" @click="viewInfo(scope.row.buyinfoId)">查看采购详情</el-button>
    </template>
  </el-table-column>
</el-table>
  <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize" background
                 :total="total" @current-change="reload"></el-pagination>

  <el-dialog v-model="dialogVisible" title="采购信息详情" width="30%">
        <span>供应商名称&nbsp;&nbsp;&nbsp;{{detailsList[0].providerName}}&nbsp;&nbsp;&nbsp;</span>
        <span>采购员&nbsp;&nbsp;&nbsp;{{detailsList[0].buyName}}</span><br>
        <span>采购时间&nbsp;&nbsp;&nbsp;{{detailsList[0].buyDate}}</span>
    <br>
        <span>采购物品明细</span>
        <el-table :data="detailsList">
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>
          <el-table-column prop="goodsBrand" label="品牌"></el-table-column>
          <el-table-column prop="buyPrice" label="采购价"></el-table-column>
          <el-table-column prop="buyNo" label="采购数量"></el-table-column>
        </el-table>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="dialogVisible=false">确定</el-button>
      </span>
    </template>
  </el-dialog>


  <div style="width: 150px;margin-left: 800px">
   <span>供应商</span> <el-input v-model="findName"></el-input>
    <span>起始日期</span>
    <el-date-picker v-model="startDate" type="date" value-format="YYYY-MM-DD"
                                           placeholder="请选择起始日期">
  </el-date-picker>
    <span>结束日期</span>
    <el-date-picker v-model="endDate" type="date" value-format="YYYY-MM-DD"
                    placeholder="请选择结束日期">
    </el-date-picker>
    <el-button type="primary" @click="reload">查询</el-button>
  </div>


</template>

<script>
import axios from "axios";
export default {
  created() {
    this.reload()
  },
  name: "BuyInfo",
  data(){
    return{
      buyInfoList:[],
      detailsList:[],
      curPage:1,
      pageSize:4,
      total:0,
      findName:'',
      startDate:'',
      endDate:'',
      dialogVisible:false
    }
  },
  methods:{
    viewInfo(buyInfoId){
      let param =new URLSearchParams();
      param.append("buyInfoId",buyInfoId);
      axios.post("/api/buyInfo/findByBuyInfoId",param).then(response=>{
         this.detailsList = response.data;
         this.dialogVisible = true;
      })
    },
    reload(){
      let param = {
        "pageNo" : this.curPage,
        "pageSize" : this.pageSize,
        "startDate" : this.startDate,
        "endDate" : this.endDate,
        "t" : {
          "providerName" : this.findName
        }
      }
      axios.post("/api/buyInfo/findBuyInfoByPage",param).then(response=>{
        let data = response.data;
        this.buyInfoList = data.records;
        this.curPage=data.current;
        this.total=data.total;
      })
    }
  }
}
</script>

<style scoped>

</style>